<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content="liuqijiang"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>

    <style type="text/css">
        body {
            font-family: "微软雅黑";
            padding-top: 20px;
            padding-bottom: 40px;
        }

        /* Custom container */
        .container-narrow {
            margin: 0 auto;
            max-width: 700px;
        }

        .container-narrow > hr {
            margin: 30px 0;
        }

        /* Main marketing message and sign up button */
        .jumbotron {
            margin: 60px 0;
            text-align: center;
        }

        .jumbotron > .h1 {
            font-size: 38px;
            line-height: 1;
        }

        .jumbotron .btn {
            font-size: 20px;
            padding: 8px 40px;
        }
        .reg{
            margin-left: 40px;
        }
        /* Supporting marketing content */
        .marketing {
            margin: 60px 0;
        }

        .marketing p + h4 {
            margin-top: 28px;
        }
    </style>
</head>
<body>

<div class="container-narrow">

    <div class="masthead">
        <ul class="nav nav-pills pull-right">
            <li class="active"><a href="/">首页</a></li>
            <li><a href="#">关于</a></li>
            <span th:if="${user}!=null">
                <li th:if="${user.role}=='admin'"><a href="">后台管理</a> </li>
                <li th:if="${user.role}=='user'"><a href="">借书记录</a> </li>
            </span>
        </ul>
        <h4 class="muted">新华图书馆</h4>
    </div>

    <hr/>

    <div class="jumbotron">
        <p class="h1">带走的是知识,留下的是文明!</p>
        <p>Take away the knowledge, leaving the civilization!</p>

        <a class="btn btn-large btn-success login"  th:href="@{login}">登&nbsp;&nbsp;&nbsp;陆</a>
        <a class="btn btn-large btn-danger reg" th:href="@{signup}">注&nbsp;&nbsp;&nbsp;册</a>
    </div>

    <hr/>

    <div class="row-fluid marketing">


        <div class="row">
            <div class="col-xs-6 col-md-3" th:each="books : ${books}">
                <a href="#" class="thumbnail">
                    <img data-src="holder.js/100%x180" alt="${books.bookName}"/>
                </a>
                <h4 th:text="${books.bookName}"></h4>
                <p th:text="${books.author}"></p>
                <p><a class="btn btn-primary bookinfo" th:href="@{'bookinfo/'+${books.id}}">详情</a></p>
            </div>


        </div>

    </div>

    <hr/>

    <div class="footer">
        <p>&copy; Company 2013</p>
    </div>

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/holder.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".bookinfo").click(function () {
            var url = this.href;
            $(".modal-body").html('<table class="table table-hover table-condensed">' +
                    '<tr>' +
                    '<th>书籍编号</th><th>书籍名称</th><th>作者</th>' +
                    '<th>出版社</th><th>发布时间</th><th>库存</th><th>简介</th>' +
                    '</tr>' +
                    '<tr>' +
                    '<td id="book_id"></td><td id="bookName"></td><td id="author"></td>' +
                    '<td id="press"></td><td id="publishTime"></td><td id="available"></td>' +
                    '<td id="description"></td>' +
                    '</tr></table>');
            $.get(url, {time: new Date().getTime()}, function (data) {
                $("#book_id").text(data.id);
                $("#bookName").text(data.bookName);
                $("#author").text(data.author);
                $("#press").text(data.press);
                $("#publishTime").text(data.publishTime);
                $("#available").text(data.available);
                validateAvailable(data.available);
                $('#myModal').modal('show');
            })
            return false;
        });
        function validateAvailable(avaliable) {
            if (avaliable > 0) {
                $("#libaray").removeClass("disabled");

            } else {
                $("#libaray").addClass("disabled");
            }
        };
        $(".login").click(function(){

        });
    });

</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="model-title">书籍详情</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="libaray">借书</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>